<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <script>
      (function() {
        const userMode = localStorage.getItem('vuepress-reco-color-scheme') || 'auto';
        const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;

        if (userMode === 'dark' || (userMode === 'auto' && systemDarkMode)) {
          document.documentElement.classList.toggle('dark', true);
        }
      })();
    </script>
    <link rel="icon" href="/icon.png"><title>vuex3 | FYJ</title><meta name="description" content="Just playing around">
    <link rel="modulepreload" href="/assets/app-5e55c3a9.js"><link rel="modulepreload" href="/assets/framework-9675d465.js"><link rel="modulepreload" href="/assets/Vuex3.html-e24f4da6.js"><link rel="modulepreload" href="/assets/Vuex3.html-68ef32c1.js"><link rel="prefetch" href="/assets/index.html-6d5e9dd3.js" as="script"><link rel="prefetch" href="/assets/index.html-3d8b60b2.js" as="script"><link rel="prefetch" href="/assets/index.html-a7cfb774.js" as="script"><link rel="prefetch" href="/assets/index.html-1a66ce3d.js" as="script"><link rel="prefetch" href="/assets/index.html-a2322c32.js" as="script"><link rel="prefetch" href="/assets/index.html-2b8e88d2.js" as="script"><link rel="prefetch" href="/assets/index.html-36817084.js" as="script"><link rel="prefetch" href="/assets/index.html-c05495db.js" as="script"><link rel="prefetch" href="/assets/index.html-3cf0f594.js" as="script"><link rel="prefetch" href="/assets/index.html-33a8693c.js" as="script"><link rel="prefetch" href="/assets/index.html-80880afd.js" as="script"><link rel="prefetch" href="/assets/index.html-df5b0273.js" as="script"><link rel="prefetch" href="/assets/index.html-d608509e.js" as="script"><link rel="prefetch" href="/assets/index.html-ac9bff28.js" as="script"><link rel="prefetch" href="/assets/index.html-d251d55d.js" as="script"><link rel="prefetch" href="/assets/index.html-d299a2c9.js" as="script"><link rel="prefetch" href="/assets/index.html-c8596e07.js" as="script"><link rel="prefetch" href="/assets/index.html-ce42ac51.js" as="script"><link rel="prefetch" href="/assets/index.html-e1e2c2da.js" as="script"><link rel="prefetch" href="/assets/index.html-49c6b4a8.js" as="script"><link rel="prefetch" href="/assets/index.html-3880c1f3.js" as="script"><link rel="prefetch" href="/assets/index.html-b5b12757.js" as="script"><link rel="prefetch" href="/assets/index.html-6cf06f14.js" as="script"><link rel="prefetch" href="/assets/index.html-1a88d37b.js" as="script"><link rel="prefetch" href="/assets/index.html-c8e98ed0.js" as="script"><link rel="prefetch" href="/assets/index.html-d7cf9c00.js" as="script"><link rel="prefetch" href="/assets/git.html-0da1c675.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-4654ddc1.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-54f235b4.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-b97d346f.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-a3fbc3f8.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-6c330c31.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-17e205d8.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-08b53360.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-3208ecf3.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-7baa2b76.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-ad7d95ea.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-31658686.js" as="script"><link rel="prefetch" href="/assets/express.html-042999ef.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-abaf3902.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-9408a820.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-8df1574a.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-72c9480b.js" as="script"><link rel="prefetch" href="/assets/promise.html-85e3fffc.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-a09bf01e.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-86d8c25d.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-86b29b9f.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-67d4835d.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-932412c5.js" as="script"><link rel="prefetch" href="/assets/typescript.html-0bd71496.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-09f47896.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-10c04317.js" as="script"><link rel="prefetch" href="/assets/vue2.html-82b6d2df.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-56d49820.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-3ffca1f7.js" as="script"><link rel="prefetch" href="/assets/api.html-b73a9946.js" as="script"><link rel="prefetch" href="/assets/home.html-746a4c0d.js" as="script"><link rel="prefetch" href="/assets/plugin.html-6a7b36ed.js" as="script"><link rel="prefetch" href="/assets/theme.html-6037defd.js" as="script"><link rel="prefetch" href="/assets/121501.html-8973c891.js" as="script"><link rel="prefetch" href="/assets/404.html-60b35caa.js" as="script"><link rel="prefetch" href="/assets/index.html-101169bd.js" as="script"><link rel="prefetch" href="/assets/index.html-c05f203a.js" as="script"><link rel="prefetch" href="/assets/index.html-0c6bc7be.js" as="script"><link rel="prefetch" href="/assets/index.html-0fe42912.js" as="script"><link rel="prefetch" href="/assets/index.html-35698f58.js" as="script"><link rel="prefetch" href="/assets/index.html-a9998c9a.js" as="script"><link rel="prefetch" href="/assets/index.html-e03acce1.js" as="script"><link rel="prefetch" href="/assets/index.html-936bfd18.js" as="script"><link rel="prefetch" href="/assets/index.html-3b167d99.js" as="script"><link rel="prefetch" href="/assets/index.html-6a7e33f2.js" as="script"><link rel="prefetch" href="/assets/index.html-00dc6c81.js" as="script"><link rel="prefetch" href="/assets/index.html-c386c5b9.js" as="script"><link rel="prefetch" href="/assets/index.html-62cab89d.js" as="script"><link rel="prefetch" href="/assets/index.html-c6f54c68.js" as="script"><link rel="prefetch" href="/assets/index.html-5fc54677.js" as="script"><link rel="prefetch" href="/assets/index.html-96867bd4.js" as="script"><link rel="prefetch" href="/assets/index.html-452a2070.js" as="script"><link rel="prefetch" href="/assets/index.html-500c2666.js" as="script"><link rel="prefetch" href="/assets/index.html-d797d831.js" as="script"><link rel="prefetch" href="/assets/index.html-84073cb9.js" as="script"><link rel="prefetch" href="/assets/index.html-8dfee4a9.js" as="script"><link rel="prefetch" href="/assets/index.html-a675820e.js" as="script"><link rel="prefetch" href="/assets/index.html-948f048e.js" as="script"><link rel="prefetch" href="/assets/index.html-522daa8a.js" as="script"><link rel="prefetch" href="/assets/index.html-4d67ded2.js" as="script"><link rel="prefetch" href="/assets/index.html-8caf183d.js" as="script"><link rel="prefetch" href="/assets/git.html-9cef5060.js" as="script"><link rel="prefetch" href="/assets/html5meitiyuansu.html-cd096af4.js" as="script"><link rel="prefetch" href="/assets/duoliebuju.html-4e591000.js" as="script"><link rel="prefetch" href="/assets/DOM__BOM.html-518d085e.js" as="script"><link rel="prefetch" href="/assets/jsbiji.html-f1c6b5c4.js" as="script"><link rel="prefetch" href="/assets/jsbiji2.html-0ce3d86b.js" as="script"><link rel="prefetch" href="/assets/RESTheAJAX.html-174a11fd.js" as="script"><link rel="prefetch" href="/assets/shuxingmiaoshufu.html-12f7f1aa.js" as="script"><link rel="prefetch" href="/assets/liulanqixuanranyuanli.html-e15be5a7.js" as="script"><link rel="prefetch" href="/assets/zhonghuievent-loop.html-993374db.js" as="script"><link rel="prefetch" href="/assets/mongodb.html-06aa4d45.js" as="script"><link rel="prefetch" href="/assets/mongoose.html-f6a2c1e1.js" as="script"><link rel="prefetch" href="/assets/express.html-c34de6a8.js" as="script"><link rel="prefetch" href="/assets/httpxieyi.html-393ba2a3.js" as="script"><link rel="prefetch" href="/assets/httpmokuai.html-84b55eda.js" as="script"><link rel="prefetch" href="/assets/nodejs.html-2ee518f3.js" as="script"><link rel="prefetch" href="/assets/nodejshexinmokuai.html-fabb53b0.js" as="script"><link rel="prefetch" href="/assets/promise.html-34216aec.js" as="script"><link rel="prefetch" href="/assets/webpackhevite.html-aac8da2d.js" as="script"><link rel="prefetch" href="/assets/huihuakongzhi.html-1540a73e.js" as="script"><link rel="prefetch" href="/assets/baoguanliqi.html-d4dece61.js" as="script"><link rel="prefetch" href="/assets/mokuaihua.html-2cfeca4a.js" as="script"><link rel="prefetch" href="/assets/fangdaolian.html-4c95566c.js" as="script"><link rel="prefetch" href="/assets/typescript.html-3e2bf303.js" as="script"><link rel="prefetch" href="/assets/vue-router3.html-fa748c7b.js" as="script"><link rel="prefetch" href="/assets/vue2(2).html-b4107b02.js" as="script"><link rel="prefetch" href="/assets/vue2.html-dfda70b7.js" as="script"><link rel="prefetch" href="/assets/vue2zujiantongxin.html-4cf781c8.js" as="script"><link rel="prefetch" href="/assets/vueRouter3lanjiazaishiyongdewenti.html-a5f191aa.js" as="script"><link rel="prefetch" href="/assets/api.html-710c8c92.js" as="script"><link rel="prefetch" href="/assets/home.html-b45de374.js" as="script"><link rel="prefetch" href="/assets/plugin.html-2075a048.js" as="script"><link rel="prefetch" href="/assets/theme.html-5b5f0e80.js" as="script"><link rel="prefetch" href="/assets/121501.html-865346dc.js" as="script"><link rel="prefetch" href="/assets/404.html-eab7b035.js" as="script"><link rel="prefetch" href="/assets/reco-valine-a0c1af1f.js" as="script">
    <link rel="preload" href="/assets/style-887583e0.css" as="style"><link rel="stylesheet" href="/assets/style-887583e0.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><div class="common-wrapper series--no show-catalog"><div><header class="navbar-container"><!--[--><div class="site-brand nav-item"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><div class="nav-item navbar-links-wrapper" style=""><div><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div><nav class="navbar-links"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><span class="xicon-container btn-toggle-dark-mode btn--dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span><span class="xicon-container btn-toggle-menus"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><circle cx="16" cy="8" r="2" fill="currentColor"></circle><circle cx="16" cy="16" r="2" fill="currentColor"></circle><circle cx="16" cy="24" r="2" fill="currentColor"></circle></svg></span></div><!--]--></header><div class="mobile-menus-container"><nav class="navbar-links mobile"><!--[--><div class="navbar-links__item"><a href="/" class="link router-link-active" aria-label="Home"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Home<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/categories/html-note/1/" class="link" aria-label="分类"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->分类<!--]--></span></span><!--[--><!--]--></a></div><div class="navbar-links__item"><a href="/tags/html5/1/" class="link" aria-label="标签"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->标签<!--]--></span></span><!--[--><!--]--></a></div><!--]--></nav><div class="appearance"><span>Appearance</span><span class="xicon-container btn-toggle-dark-mode"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M15 2h2v3h-2z" fill="currentColor"></path><path d="M27 15h3v2h-3z" fill="currentColor"></path><path d="M15 27h2v3h-2z" fill="currentColor"></path><path d="M2 15h3v2H2z" fill="currentColor"></path><path d="M5.45 6.884l1.414-1.415l2.121 2.122l-1.414 1.414z" fill="currentColor"></path><path d="M23 7.58l2.121-2.12l1.414 1.414l-2.121 2.121z" fill="currentColor"></path><path d="M23.002 24.416l1.415-1.414l2.12 2.122l-1.413 1.414z" fill="currentColor"></path><path d="M5.47 25.13L7.59 23L9 24.42l-2.12 2.12l-1.41-1.41z" fill="currentColor"></path><path d="M16 8a8 8 0 1 0 8 8a8 8 0 0 0-8-8zm0 14a6 6 0 0 1 0-12z" fill="currentColor"></path></svg></span></div></div><div class="series-mask"></div><aside class="series-container"><div class="site-brand"><img class="logo" src="/logo.png" alt="FYJ"><a href="/" class="site-name can-hide">FYJ</a></div><!--[--><!--]--></aside><!--[--><main class="page-container"><h1 class="page-title">vuex3</h1><div class="page-info"><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M16 4a5 5 0 1 1-5 5a5 5 0 0 1 5-5m0-2a7 7 0 1 0 7 7a7 7 0 0 0-7-7z" fill="currentColor"></path><path d="M26 30h-2v-5a5 5 0 0 0-5-5h-6a5 5 0 0 0-5 5v5H6v-5a7 7 0 0 1 7-7h6a7 7 0 0 1 7 7z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->fyj<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2023/05/01<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M11.17 6l3.42 3.41l.58.59H28v16H4V6h7.17m0-2H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h24a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2H16l-3.41-3.41A2 2 0 0 0 11.17 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue2-note<!--]--></span></span><span class="xicon-container left"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:18px;height:18px;font-size:18px;color:inherit;"><path d="M10 14a4 4 0 1 1 4-4a4.005 4.005 0 0 1-4 4zm0-6a2 2 0 1 0 1.998 2.004A2.002 2.002 0 0 0 10 8z" fill="currentColor"></path><path d="M16.644 29.415L2.586 15.354A2 2 0 0 1 2 13.941V4a2 2 0 0 1 2-2h9.941a2 2 0 0 1 1.414.586l14.06 14.058a2 2 0 0 1 0 2.828l-9.943 9.943a2 2 0 0 1-2.829 0zM4 4v9.942L18.058 28L28 18.058L13.942 4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->vue2<!--]--></span></span><!----></div><div class="theme-reco-default-content"><div><h2 id="vuex" tabindex="-1"><a class="header-anchor" href="#vuex" aria-hidden="true">#</a> Vuex</h2><h3 id="_1-概念" tabindex="-1"><a class="header-anchor" href="#_1-概念" aria-hidden="true">#</a> 1.概念</h3><p>在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。</p><h3 id="_2-何时使用" tabindex="-1"><a class="header-anchor" href="#_2-何时使用" aria-hidden="true">#</a> 2.何时使用？</h3><p>多个组件需要共享数据时。</p><h3 id="_3-搭建vuex环境" tabindex="-1"><a class="header-anchor" href="#_3-搭建vuex环境" aria-hidden="true">#</a> 3.搭建vuex环境</h3><ol><li><p>创建文件：<code>src/store/index.js</code></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//引入Vue核心库</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>
<span class="token comment">//引入Vuex</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&#39;vuex&#39;</span>
<span class="token comment">//应用Vuex插件</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>

<span class="token comment">//准备actions对象——响应组件中用户的动作</span>
<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">//准备mutations对象——修改state中的数据</span>
<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment">//准备state对象——保存具体的数据</span>
<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

<span class="token comment">//创建并暴露store</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	actions<span class="token punctuation">,</span>
	mutations<span class="token punctuation">,</span>
	state
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>在<code>main.js</code>中创建vm时传入<code>store</code>配置项</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">...</span><span class="token operator">...</span>
<span class="token comment">//引入store</span>
<span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">&#39;./store&#39;</span>
<span class="token operator">...</span><span class="token operator">...</span>

<span class="token comment">//创建vm</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token literal-property property">el</span><span class="token operator">:</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">,</span>
	<span class="token function-variable function">render</span><span class="token operator">:</span> <span class="token parameter">h</span> <span class="token operator">=&gt;</span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span><span class="token punctuation">,</span>
	store
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ol><h3 id="_4-基本使用" tabindex="-1"><a class="header-anchor" href="#_4-基本使用" aria-hidden="true">#</a> 4.基本使用</h3><ol><li><p>初始化数据、配置<code>actions</code>、配置<code>mutations</code>，操作文件<code>store.js</code></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//引入Vue核心库</span>
<span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>
<span class="token comment">//引入Vuex</span>
<span class="token keyword">import</span> Vuex <span class="token keyword">from</span> <span class="token string">&#39;vuex&#39;</span>
<span class="token comment">//引用Vuex</span>
Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Vuex<span class="token punctuation">)</span>

<span class="token keyword">const</span> actions <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//响应组件中加的动作</span>
	<span class="token function">jia</span><span class="token punctuation">(</span><span class="token parameter">context<span class="token punctuation">,</span>value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token comment">// console.log(&#39;actions中的jia被调用了&#39;,miniStore,value)</span>
		context<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&#39;JIA&#39;</span><span class="token punctuation">,</span>value<span class="token punctuation">)</span>
	<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> mutations <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token comment">//执行加</span>
	<span class="token constant">JIA</span><span class="token punctuation">(</span><span class="token parameter">state<span class="token punctuation">,</span>value</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token comment">// console.log(&#39;mutations中的JIA被调用了&#39;,state,value)</span>
		state<span class="token punctuation">.</span>sum <span class="token operator">+=</span> value
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">//初始化数据</span>
<span class="token keyword">const</span> state <span class="token operator">=</span> <span class="token punctuation">{</span>
   <span class="token literal-property property">sum</span><span class="token operator">:</span><span class="token number">0</span>
<span class="token punctuation">}</span>

<span class="token comment">//创建并暴露store</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	actions<span class="token punctuation">,</span>
	mutations<span class="token punctuation">,</span>
	state<span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>组件中读取vuex中的数据：<code>$store.state.sum</code></p></li><li><p>组件中修改vuex中的数据：<code>$store.dispatch(&#39;action中的方法名&#39;,数据)</code> 或 <code>$store.commit(&#39;mutations中的方法名&#39;,数据)</code></p><blockquote><p>备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写<code>dispatch</code>，直接编写<code>commit</code></p></blockquote></li></ol><h3 id="_5-getters的使用" tabindex="-1"><a class="header-anchor" href="#_5-getters的使用" aria-hidden="true">#</a> 5.getters的使用</h3><ol><li><p>概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。</p></li><li><p>在<code>store.js</code>中追加<code>getters</code>配置</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token operator">...</span><span class="token operator">...</span>

<span class="token keyword">const</span> getters <span class="token operator">=</span> <span class="token punctuation">{</span>
	<span class="token function">bigSum</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
		<span class="token keyword">return</span> state<span class="token punctuation">.</span>sum <span class="token operator">*</span> <span class="token number">10</span>
	<span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">//创建并暴露store</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
	<span class="token operator">...</span><span class="token operator">...</span>
	getters
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>组件中读取数据：<code>$store.getters.bigSum</code></p></li></ol><h3 id="_6-四个map方法的使用" tabindex="-1"><a class="header-anchor" href="#_6-四个map方法的使用" aria-hidden="true">#</a> 6.四个map方法的使用</h3><ol><li><p>**mapState方法：**用于帮助我们映射<code>state</code>中的数据为计算属性</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//借助mapState生成计算属性：sum、school、subject（对象写法）</span>
     <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">sum</span><span class="token operator">:</span><span class="token string">&#39;sum&#39;</span><span class="token punctuation">,</span><span class="token literal-property property">school</span><span class="token operator">:</span><span class="token string">&#39;school&#39;</span><span class="token punctuation">,</span><span class="token literal-property property">subject</span><span class="token operator">:</span><span class="token string">&#39;subject&#39;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
         
     <span class="token comment">//当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。</span>
    <span class="token comment">//借助mapState生成计算属性：sum、school、subject（数组写法）</span>
    <span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;sum&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;school&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;subject&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>**mapGetters方法：**用于帮助我们映射<code>getters</code>中的数据为计算属性</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">computed</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token comment">//借助mapGetters生成计算属性：bigSum（对象写法）</span>
    <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">bigSum</span><span class="token operator">:</span><span class="token string">&#39;bigSum&#39;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>

    <span class="token comment">//借助mapGetters生成计算属性：bigSum（数组写法）</span>
    <span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;bigSum&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>**mapActions方法：**用于帮助我们生成与<code>actions</code>对话的方法，即：包含<code>$store.dispatch(xxx)</code>的函数</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token comment">//靠mapActions生成：incrementOdd、incrementWait（对象形式）</span>
    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">incrementOdd</span><span class="token operator">:</span><span class="token string">&#39;jiaOdd&#39;</span><span class="token punctuation">,</span><span class="token literal-property property">incrementWait</span><span class="token operator">:</span><span class="token string">&#39;jiaWait&#39;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>

    <span class="token comment">//靠mapActions生成：incrementOdd、incrementWait（数组形式）</span>
    <span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;jiaOdd&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;jiaWait&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>**mapMutations方法：**用于帮助我们生成与<code>mutations</code>对话的方法，即：包含<code>$store.commit(xxx)</code>的函数</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token literal-property property">methods</span><span class="token operator">:</span><span class="token punctuation">{</span>
    <span class="token comment">//靠mapActions生成：increment、decrement（对象形式）</span>
    <span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token literal-property property">increment</span><span class="token operator">:</span><span class="token string">&#39;JIA&#39;</span><span class="token punctuation">,</span><span class="token literal-property property">decrement</span><span class="token operator">:</span><span class="token string">&#39;JIAN&#39;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    
    <span class="token comment">//靠mapMutations生成：JIA、JIAN（对象形式）</span>
    <span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">&#39;JIA&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;JIAN&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ol><blockquote><p>备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。</p><p>mapAction和mapMutations使用时必须放在methods里，mapState和mapGetters使用时必须放在computed</p></blockquote><h3 id="_7-模块化-命名空间" tabindex="-1"><a class="header-anchor" href="#_7-模块化-命名空间" aria-hidden="true">#</a> 7.模块化+命名空间</h3><ol><li><p>目的：让代码更好维护，让多种数据分类更加明确。</p></li><li><p>修改<code>store.js</code></p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">const</span> countAbout <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">namespaced</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">//开启命名空间</span>
  <span class="token literal-property property">state</span><span class="token operator">:</span><span class="token punctuation">{</span><span class="token literal-property property">x</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">getters</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">bigSum</span><span class="token punctuation">(</span><span class="token parameter">state</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
       <span class="token keyword">return</span> state<span class="token punctuation">.</span>sum <span class="token operator">*</span> <span class="token number">10</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> personAbout <span class="token operator">=</span> <span class="token punctuation">{</span>
  <span class="token literal-property property">namespaced</span><span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">,</span><span class="token comment">//开启命名空间</span>
  <span class="token literal-property property">state</span><span class="token operator">:</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">mutations</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token literal-property property">actions</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> store <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vuex<span class="token punctuation">.</span>Store</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token literal-property property">modules</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    countAbout<span class="token punctuation">,</span>
    personAbout
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>开启命名空间后，组件中读取state数据：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//方式一：自己直接读取</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>state<span class="token punctuation">.</span>personAbout<span class="token punctuation">.</span>list
<span class="token comment">//方式二：借助mapState读取：</span>
<span class="token operator">...</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token string">&#39;countAbout&#39;</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">&#39;sum&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;school&#39;</span><span class="token punctuation">,</span><span class="token string">&#39;subject&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>开启命名空间后，组件中读取getters数据：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//方式一：自己直接读取</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span>getters<span class="token punctuation">[</span><span class="token string">&#39;personAbout/firstPersonName&#39;</span><span class="token punctuation">]</span>
<span class="token comment">//方式二：借助mapGetters读取：</span>
<span class="token operator">...</span><span class="token function">mapGetters</span><span class="token punctuation">(</span><span class="token string">&#39;countAbout&#39;</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token string">&#39;bigSum&#39;</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>开启命名空间后，组件中调用dispatch</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//方式一：自己直接dispatch</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">dispatch</span><span class="token punctuation">(</span><span class="token string">&#39;personAbout/addPersonWang&#39;</span><span class="token punctuation">,</span>person<span class="token punctuation">)</span>
<span class="token comment">//方式二：借助mapActions：</span>
<span class="token operator">...</span><span class="token function">mapActions</span><span class="token punctuation">(</span><span class="token string">&#39;countAbout&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">incrementOdd</span><span class="token operator">:</span><span class="token string">&#39;jiaOdd&#39;</span><span class="token punctuation">,</span><span class="token literal-property property">incrementWait</span><span class="token operator">:</span><span class="token string">&#39;jiaWait&#39;</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li><li><p>开启命名空间后，组件中调用commit</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token comment">//方式一：自己直接commit</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$store<span class="token punctuation">.</span><span class="token function">commit</span><span class="token punctuation">(</span><span class="token string">&#39;personAbout/ADD_PERSON&#39;</span><span class="token punctuation">,</span>person<span class="token punctuation">)</span>
<span class="token comment">//方式二：借助mapMutations：</span>
<span class="token operator">...</span><span class="token function">mapMutations</span><span class="token punctuation">(</span><span class="token string">&#39;countAbout&#39;</span><span class="token punctuation">,</span><span class="token punctuation">{</span><span class="token literal-property property">increment</span><span class="token operator">:</span><span class="token string">&#39;JIA&#39;</span><span class="token punctuation">,</span><span class="token literal-property property">decrement</span><span class="token operator">:</span><span class="token string">&#39;JIAN&#39;</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></li></ol><h3 id="_8-补充关于state和mutations的顺序" tabindex="-1"><a class="header-anchor" href="#_8-补充关于state和mutations的顺序" aria-hidden="true">#</a> 8.补充关于state和mutations的顺序</h3><p>在Vuex 3中，mutations的执行顺序是在state之前，所以即使你在mutations之前定义了state，也不会导致错误。这是因为mutations只是定义了一些函数，它们会在实际的state对象被创建之后才会被调用。</p><p>在Vuex 3中，当你创建一个store对象时，它会先创建一个空的state对象，然后创建mutations、actions、getters等其他的对象。在mutations创建完毕之后，它们会被注册到store对象中，等待调用。</p><p>当你在组件中调用一个mutation时，实际上是通过store对象来调用这个mutation函数。这个mutation函数会接受当前的state对象作为参数，并且会修改state对象的值。这样，state对象就被更新了，然后组件就可以通过getter来获取更新后的state值。</p><p>因此，如果你在mutations之前定义了state，它并不会影响mutations的执行。相反，如果你在mutations中修改了一个没有被定义的state属性，它会导致一个错误。所以，为了避免这种情况的发生，我们应该在state对象中定义所有的state属性，然后在mutations中只修改已经定义的state属性。</p></div></div><footer class="page-meta"><div class="meta-item edit-link"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M2 26h28v2H2z" fill="currentColor"></path><path d="M25.4 9c.8-.8.8-2 0-2.8l-3.6-3.6c-.8-.8-2-.8-2.8 0l-15 15V24h6.4l15-15zm-5-5L24 7.6l-3 3L17.4 7l3-3zM6 22v-3.6l10-10l3.6 3.6l-10 10H6z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Edit this page<!--]--></span></span></div><div class="meta-item last-updated"><span class="xicon-container left meta-item-label"><!--[--><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" class="xicon-icon" style="width:20px;height:20px;font-size:20px;color:inherit;"><path d="M26 4h-4V2h-2v2h-8V2h-2v2H6c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 22H6V12h20v14zm0-16H6V6h4v2h2V6h8v2h2V6h4v4z" fill="currentColor"></path></svg><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Last Updated 2023/5/1 13:50:48<!--]--></span></span></div></footer><!----><!----></main><!--]--><div class="page-catalog-container"><h5 class="tip">ON THIS PAGE</h5><ul><!--[--><!--[--><li class="page-catalog-menu-depth_2"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#vuex" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="Vuex"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->Vuex<!--]--></span></span><!--[--><!--]--></a></li><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#_1-概念" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="1.概念"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->1.概念<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#_2-何时使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="2.何时使用？"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->2.何时使用？<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#_3-搭建vuex环境" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="3.搭建vuex环境"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->3.搭建vuex环境<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#_4-基本使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="4.基本使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->4.基本使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#_5-getters的使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="5.getters的使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->5.getters的使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#_6-四个map方法的使用" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="6.四个map方法的使用"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->6.四个map方法的使用<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#_7-模块化-命名空间" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="7.模块化+命名空间"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->7.模块化+命名空间<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--[--><li class="page-catalog-menu-depth_3"><a aria-current="page" href="/blogs/vue2-note/Vuex3.html#_8-补充关于state和mutations的顺序" class="router-link-active router-link-exact-active link page-catalog-item" aria-label="8.补充关于state和mutations的顺序"><!--[--><!--]--><span class="xicon-container left"><!--[--><!----><!--]--><span class="xicon-content" style="color:inherit;font-size:14px;"><!--[-->8.补充关于state和mutations的顺序<!--]--></span></span><!--[--><!--]--></a></li><!--]--><!--]--><!--]--></ul></div></div></div></div><!----><!----><!--]--></div>
    <script type="module" src="/assets/app-5e55c3a9.js" defer></script>
  </body>
</html>
